
import './App.css';
import React, { useState } from 'react';
import './ArrowAnimation.css'

// function Son({onGetSonMsg}){
const Son = ({onGetSonMsg}) => { //箭头函数表示
  const sonMsg = "this Msg from Son"
  return (
    <div style={{ color: 'red' }}>
      this is son <br/><br/>
      <button onClick={() => onGetSonMsg(sonMsg)}>sendMsgToFather</button>
    </div>
  )
}

/**
 * @returns 
 *  子组件给父组件传递数据
 */
const MyApp = () => {
  const [msg,setMsg] = useState();
  const getMsg = (msg)=>{
    setMsg(msg);
    console.log("MyApp getMsg from Son :",msg)
  }
  return (
    <span >
      this is father view , {msg}<br/><br/>
      <Son onGetSonMsg={getMsg} />
    </span>
  );
};

export default MyApp;